<template>
	<swiper class="tabs" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :display-multiple-items="5">
		<swiper-item @tap.stop="selectItem(index)" :class="['item',{act: currentTab === index}]" v-for="(item, index) in itemList" :key="index">
			<text>{{item}}</text>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		props: {
			indicatorDots: {
				type: Boolean,
				default: false
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			interval: {
				type: Number,
				default: 5000
			},
			duration: {
				type: Number,
				default: 500
			}
		},
		data () {
			return {
				currentTab: 0,
				itemList: [
					 '付费视频', '大礼包', '积分','平团','文章','秒杀'
				]
			}
		},
		methods: {
			selectItem(idx) {
				this.currentTab = idx
			}
		}
	}
</script>

<style lang="less">
@import '../../../common/styles/variables.less';
.tabs {
   height:@height;
   font-size: 14px;
   overflow:hidden;
   .border-bottom;
   .item {
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   overflow: hidden;
	   height: 100%;
	   .active;
   }
}
</style>
